import { ref } from "vue";
import { reqChannelInfo, reqSelMerchant, reqChannelApply } from "@/api/index";
import { useUserStore } from "@/store/index";
import { getChannelOpenStatusLabel } from "@/utils/selectOptions";
import { ElMessage } from "element-plus";

export const useOriginInfo = () => {
  const loading = ref(false);
  const userStore = useUserStore();
  const tableConfigData = ref([
    {
      prop: "country",
      label: "國別",
      width: 80,
    },
    {
      prop: "currency",
      label: "貨幣",
      width: 80,
    },
    {
      prop: "type",
      label: "類別",
    },
    // {
    //   prop: "payMethod",
    //   label: "支付方式",
    // },
    {
      prop: "status",
      label: "狀態",
      width: 80,
    },
    {
      prop: "openChannel",
      label: "操作",
    },
    // {
    //   prop: "viewFile",
    //   label: "對接文檔",
    // },
    {
      prop: "checkCost",
      label: "詳情",
    },
  ]);
  const pageInfo = ref({
    totalPage: 0,
    currentPage: 1,
    pageSize: 10,
  });

  const tableData = ref([]);
  const tableDataDisplay = ref([]);
  //   const tableData = ref([
  //     {
  //       country: "台灣",
  //       currency: "美元",
  //       type: "代收",
  //       payMethod: "OVO",
  //       status: "未開通",
  //       controlUse: "恢復",
  //       viewFile:
  //         "https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types",
  //       checkCost: "查看費用",
  //     },
  //     {
  //       country: "台灣",
  //       currency: "美元",
  //       type: "代收",
  //       payMethod: "OVO",
  //       status: "未開通",
  //       controlUse: "開通",
  //       viewFile:
  //         "https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types",
  //       checkCost: "查看費用",
  //     },
  //   ]);
  const costCheckDialogTableConfigData = ref([
    // {
    //   prop: "merchantNum",
    //   label: "商戶號",
    // },
    {
      prop: "country",
      label: "國別",
      width: 80,
    },
    {
      prop: "currency",
      label: "貨幣",
      width: 80,
    },
    {
      prop: "type",
      label: "類別",
    },
    // {
    //   prop: "payMethod",
    //   label: "支付方式",
    // },
    // {
    //   prop: "staticCost",
    //   label: "固定費用",
    // },
    {
      prop: "costRate",
      label: "費率",
    },
    {
      prop: "cost",
      label: "費用",
    },
    {
      prop: "settlementMethod",
      label: "結算天数",
    },
  ]);
  const costCheckDialogTableData = ref([]);
  const setTableConfigData = (data) => {
    clog("setTableConfigData:", data);
    costCheckDialogTableData.value = [
      {
        merchantNum: data.user_id,
        country: data.country,
        currency: data.currency,
        type: data.bid ? "代付" : "代收",
        settlementMethod: data.costData.settlement_method,
        cost: data.costData.cost,
        costRate: data.costData.rate,
      },
    ];
  };
  const toggleStatus = async (row) => {
    loading.value = true;
    try {
      const res = await reqChannelApply({
        user_id: userStore.user_id,
        cid: row.cid || "0",
        bid: row.bid || "0",
      });
      loading.value = false;
      ElMessage.success("渠道狀態已更改!");
      clog("渠道狀態更改：", res);
      initData();
    } catch (err) {
      console.log(err);
      loading.value = false;
    }
  };
  const initData = async () => {
    try {
      loading.value = true;
      const res = await reqChannelInfo(userStore.user_id);
      clog("渠道列表：", res);
      const tmpData = res.bdata.concat(res.cdata);
      clog("tmpData", tmpData);
      tableData.value = tmpData.map((item) => ({
        merchantNum: item.user_id,
        country: item.country,
        currency: item.currency,
        type: item.bid ? "代付" : "代收",
        status: getChannelOpenStatusLabel(item.status),
        statusValue: item.status,
        costData: item.costData,
        bid: item.bid,
        cid: item.cid,
      }));
      pageInfo.value.totalPage = Math.ceil(
        tmpData.length / pageInfo.value.pageSize
      );
      setTableDataDisplay(pageInfo.value.currentPage, pageInfo.value.pageSize);
      loading.value = false;
    } catch (err) {
      clog("initData error:", err);
      loading.value = false;
    }
  };
  const prevPage = () => {
    if (pageInfo.value.currentPage > 1) {
      pageInfo.value.currentPage--;
      setTableDataDisplay(pageInfo.value.currentPage, pageInfo.value.pageSize);
    }
  };
  const nextPage = () => {
    if (pageInfo.value.currentPage < pageInfo.value.totalPage) {
      pageInfo.value.currentPage++;
      setTableDataDisplay(pageInfo.value.currentPage, pageInfo.value.pageSize);
    }
  };
  const setTableDataDisplay = (page, pageSize) => {
    const startIndex = (page - 1) * pageSize;
    const endIndex = page * pageSize;
    tableDataDisplay.value = tableData.value.slice(startIndex, endIndex);
  };
  initData();
  return {
    loading,
    tableConfigData,
    tableDataDisplay,
    costCheckDialogTableConfigData,
    costCheckDialogTableData,
    toggleStatus,
    initData,
    prevPage,
    nextPage,
    setTableConfigData,
    pageInfo,
  };
};

export const useBusiInfo = () => {
  const loading = ref(false);
  const level = ref(0);
  const busiId = ref("");
  const KEY_INDEX_MAP = {
    company_name: 0,
    license_code: 2,
    contacts: 4,
    phone: 6,
    mail: 8,
    bank_name: 1,
    account_name: 3,
    account: 5,
    currency: 7,
    exchange_rate: 9,
  };
  const infoList = ref([
    {
      label: "公司名稱",
      value: "",
    },
    {
      label: "提現銀行名稱",
      value: "",
    },
    {
      label: "執照號碼",
      value: "",
    },
    {
      label: "提現賬戶名稱",
      value: "",
    },
    {
      label: "聯繫人",
      value: "",
    },
    {
      label: "提現銀行帳戶號",
      value: "",
    },
    {
      label: "聯繫電話",
      value: "",
    },
    {
      label: "提現貨幣",
      value: "",
    },
    {
      label: "聯繫郵箱",
      value: "",
    },
    {
      label: "結算匯率",
      value: "",
    },
  ]);

  const initData = async () => {
    try {
      const userStore = useUserStore();
      loading.value = true;
      const res = await reqSelMerchant(userStore.user_id);
      clog("商戶信息：", res);
      const tmpInfo = res.data[0];
      busiId.value = String(tmpInfo.user_id);
      level.value = res.level[0].level;
      const tmpKeys = Object.keys(tmpInfo);
      tmpKeys.forEach((key) => {
        const targetIndex = KEY_INDEX_MAP[key];
        if (targetIndex !== undefined) {
          const targetValue = tmpInfo[key];
          infoList.value[targetIndex].value = targetValue;
        }
      });
      loading.value = false;
    } catch (err) {
      loading.value = false;
    }
  };
  initData();
  return {
    infoList,
    loading,
    level,
    busiId,
  };
};
